<script setup lang="ts">
defineOptions({
  name: "detailInfo"
});

import { ref } from "vue";
import { Dashboard, CaretRight } from "@px-ui/icons-vue";

import dayjs from "dayjs";
import isToday from "dayjs/plugin/isToday";

dayjs.extend(isToday);

const props = withDefaults(defineProps<{ loading: boolean }>(), { loading: false });

const data = ref<Array<Record<string, any>>>([]);

const mapData = (arr: Array<any>) => {
  if (!arr?.length) return [];
  return arr.map(item => {
    item.subEquipments = item.subEquipments?.map(ite => {
      const {
        lifeCycle: { expiredDate, isExpiring, remainingDays, ratedUsageDays, installTime }
      } = ite;
      if (dayjs().isAfter(dayjs(expiredDate))) {
        ite["translateY"] = 0;
      } else if (isExpiring) {
        ite["translateY"] = 36;
      } else if (remainingDays && ratedUsageDays && remainingDays < ratedUsageDays) {
        ite["translateY"] = 36 + Math.floor((160 * remainingDays) / ratedUsageDays);
      } else if (dayjs(installTime).isToday()) {
        ite["translateY"] = 232;
      } else {
        ite["translateY"] = 232;
      }
      return ite;
    });
    return item;
  });
};

const initData = async (arr: Array<any>) => {
  data.value = mapData(arr);
};

defineExpose({
  initData
});
</script>

<template>
  <px-scrollbar v-loading="loading" class="detailInfo">
    <div v-for="item in data" :key="item?.eqpId" class="detailInfo-item">
      <div class="item-title">{{ item?.eqpName }}</div>
      <div class="item-content">
        <div v-for="ite in item?.subEquipments" :key="ite?.subEqpId" class="item-content-item">
          <div class="item-content-item-top">
            <px-icon><Dashboard /></px-icon>
          </div>
          <div class="item-content-item-content">
            <div class="item-content-flag">
              <px-icon :style="{ transform: `translateY(${ite.translateY}px)`, color: ite.translateY === 0 ? 'red' : 'var(--px-color-primary)' }"
                ><CaretRight
              /></px-icon>
            </div>
            <div class="item-content-step">
              <div class="item-content-common item-content-expiredDate">{{ ite?.lifeCycle?.expiredDate || "--" }}</div>
              <div class="item-content-common item-content-comingDate">临期</div>
              <div class="item-content-usedDate">
                <div class="item-content-usedDate-common item-content-usedDate-use">
                  <div class="label">已使用</div>
                  <div class="num">
                    <span class="num-data">{{ ite?.lifeCycle?.usageDays ?? "--" }}</span>
                    <span v-if="typeof ite?.lifeCycle?.usageDays === 'number'" class="num-unit">天</span>
                  </div>
                </div>
                <div class="item-content-usedDate-common item-content-usedDate-rest">
                  <div class="label" :style="{ color: ite?.lifeCycle?.remainingDays < 20 ? 'red' : '' }">剩余</div>
                  <div class="num" :style="{ color: ite?.lifeCycle?.remainingDays < 20 ? 'red' : '' }">
                    <span class="num-data">{{ ite?.lifeCycle?.remainingDays ?? "--" }}</span>
                    <span v-if="typeof ite?.lifeCycle?.remainingDays === 'number'" class="num-unit">天</span>
                  </div>
                </div>
              </div>
              <div class="item-content-common item-content-startDate">{{ ite?.lifeCycle?.installTime || "--" }}</div>
            </div>
          </div>
          <div class="item-content-item-bottom">{{ ite?.subEqpNo }}</div>
        </div>
      </div>
    </div>
  </px-scrollbar>
</template>

<style lang="scss" scoped>
.detailInfo {
  :deep(.px-scrollbar__view) {
    box-sizing: border-box;
    display: flex;
    gap: 16px;
    padding-bottom: 16px;

    .detailInfo-item {
      display: flex;
      flex-direction: column;
      border: 1px solid #ddd;
      border-radius: 8px;

      .item-title {
        box-sizing: border-box;
        height: 36px;
        padding: 0 24px;
        font-weight: 600;
        line-height: 36px;
        color: #333;
        text-align: center;
        letter-spacing: 2px;
        background-color: #e7eefb;
        border-bottom: 1px solid #ddd;
      }

      .item-content {
        display: flex;
        // height: 355px;
        .item-content-item {
          border-right: 1px solid #ddd;

          &:last-of-type {
            border-right: none;
          }

          .item-content-item-top {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 140px;
            height: 50px;
            padding: 0 12px;
            border-bottom: 1px solid #ddd;

            .px-icon {
              font-size: 40px;
              color: var(--px-color-primary);
            }
          }

          .item-content-item-bottom {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 140px;
            height: 36px;
            padding: 0 12px;
          }

          .item-content-item-content {
            display: flex;
            align-items: stretch;
            border-bottom: 1px solid #ddd;

            .item-content-flag {
              width: 20px;
              border-right: 1px solid #ddd;

              .px-icon {
                margin-top: 8px;
                font-size: 20px;
                font-weight: 600;
                color: var(--px-color-primary);
              }
            }

            .item-content-step {
              flex: 1;

              .item-content-common {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 36px;
                padding: 0 8px;
                line-height: 1;
                color: #333;
                letter-spacing: 1px;
              }

              .item-content-expiredDate {
                background-color: #ffddde;
                border-bottom: 1px solid #ddd;
              }

              .item-content-comingDate {
                background-color: #fffbc4;
                border-bottom: 1px solid #ddd;
              }

              .item-content-usedDate {
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                gap: 16px;
                align-items: center;
                justify-content: center;
                height: 160px;
                padding: 0 8px;
                border-bottom: 1px solid #ddd;

                .item-content-usedDate-common {
                  .label {
                    text-align: center;
                  }

                  .num {
                    text-align: center;

                    .num-data {
                      font-size: 26px;
                      font-weight: 600;
                    }

                    .num-unit {
                      padding-left: 2px;
                      font-size: 12px;
                    }
                  }
                }
                // .item-content-usedDate-use {
                // }
                // .item-content-usedDate-rest {
                // }
              }

              .item-content-startDate {
                background-color: #dbffe5;
              }
            }
          }
        }
      }
    }
  }
}
</style>
